<!-- if cvcHeight not specified, render table with viewport target, without card height container -->
<ng-container *ngIf="!cvcHeight; else setHeightCard">
  <nz-card
    [nzTitle]="titleTemplate"
    [nzExtra]="extraTemplate"
    nzSize="small"
    cvcAutoHeightCard
    cvcAutoHeightTarget="viewport">
    <ng-template [ngTemplateOutlet]="table"> </ng-template>
  </nz-card>
</ng-container>

<!-- if cvcHeight is specified, render table in container w/ specified height-->
<ng-template #setHeightCard>
  <div
    class="card-container"
    [ngStyle]="{ height: cvcHeight }">
    <nz-card
      [nzTitle]="titleTemplate"
      [nzExtra]="extraTemplate"
      cvcAutoHeightCard
      nzSize="small">
      <ng-template [ngTemplateOutlet]="table"> </ng-template>
    </nz-card>
  </div>
</ng-template>

<ng-template #table>
  <!-- nzVirtualItemSize can be determined by inspecting the row element in Dev tools, and noting the height calculated in its Styles tab. this probably shouldn't change much, if at all. -->
  <nz-table
    #virtualTable
    nzSize="small"
    [nzData]="(row$ | ngrxPush) || []"
    [nzLoading]="!(row$ | ngrxPush)"
    [cvcAutoHeightTable]="25"
    [nzVirtualItemSize]="29"
    cvcTableScroll
    (cvcTableScrollOnScroll)="scrollEvent$.next($event)"
    [cvcTableScrollQueryRef]="queryRef"
    [cvcTableScrollPageInfo]="pageInfo$ | ngrxPush"
    [cvcTableScrollToIndex]="(scrollIndex$ | ngrxPush)!"
    [nzVirtualForTrackBy]="trackByIndex"
    [nzScroll]="{ x: '680px', y: '800px' }"
    [nzFrontPagination]="false"
    [nzShowPagination]="false">
    <thead (nzSortOrderChange)="sortChange$.next($event)">
      <tr class="col-header-row">
        <th
          nzWidth="100px"
          nzLeft
          [nzColumnKey]="sortColumns.Id"
          [nzSortFn]="true">
          AID
        </th>
        <th nzWidth="320px">Molecular Profile</th>
        <th
          nzWidth="250px"
          [nzColumnKey]="sortColumns.DiseaseName"
          [nzSortFn]="true">
          Disease
        </th>
        <th nzWidth="350px">Therapies</th>
        <th
          nzWidth="40px"
          nz-tooltip
          nzTooltipTitle="Therapy Interaction Type">
          IT
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.Summary"
          [nzSortFn]="true"
          nz-tooltip
          nzTooltipTitle="Summary">
          SUM
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.AssertionType"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Assertion Type">
          AT
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.AssertionDirection"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Assertion Direction">
          AD
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.Significance"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="Significance">
          S
        </th>
        <th
          nzWidth="60px"
          nzRight
          [nzColumnKey]="sortColumns.AmpLevel"
          [nzSortFn]="true"
          nzAlign="center"
          nz-tooltip
          nzTooltipTitle="AMP/ASCO/CAP Category">
          CAT
        </th>
        <th
          nzWidth="75px"
          nzRight
          nzAlign="right"
          [nzColumnKey]="sortColumns.EvidenceItemsCount"
          [nzSortFn]="true"
          [nzSortDirections]="['descend', 'ascend', null]"
          nz-tooltip
          nzTooltipTitle="Evidence Count">
          <i
            nz-icon
            nzType="civic-evidence"></i>
          Count
        </th>
      </tr>
      <tr class="filter-row">
        <th nzLeft>
          <cvc-clearable-input-filter
            [(inputModel)]="aidInput"
            [onInputChanged]="textInputCallback"></cvc-clearable-input-filter>
        </th>
        <th>
          <cvc-clearable-input-filter
            [(inputModel)]="molecularProfileNameInput"
            [onInputChanged]="textInputCallback"></cvc-clearable-input-filter>
        </th>
        <th>
          <cvc-clearable-input-filter
            [(inputModel)]="diseaseNameInput"
            [onInputChanged]="textInputCallback"></cvc-clearable-input-filter>
        </th>
        <th>
          <cvc-clearable-input-filter
            [(inputModel)]="therapyNameInput"
            [onInputChanged]="textInputCallback"></cvc-clearable-input-filter>
        </th>
        <th></th>
        <th nzRight>
          <cvc-clearable-input-filter
            [(inputModel)]="summaryInput"
            [onInputChanged]="textInputCallback"></cvc-clearable-input-filter>
        </th>
        <th
          nzRight
          nzAlign="center">
          <nz-select
            nzAllowClear
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            nzPlaceHolder="All"
            (ngModelChange)="onModelChanged()"
            [(ngModel)]="assertionTypeInput">
            <nz-option
              nzValue="PREDICTIVE"
              nzLabel="Predictive"></nz-option>
            <nz-option
              nzValue="PROGNOSTIC"
              nzLabel="Prognostic"></nz-option>
            <nz-option
              nzValue="DIAGNOSTIC"
              nzLabel="Diagnostic"></nz-option>
            <nz-option
              nzValue="PREDISPOSING"
              nzLabel="Predisposing"></nz-option>
            <nz-option
              nzValue="ONCOGENIC"
              nzLabel="Oncogenic"></nz-option>
          </nz-select>
        </th>
        <th
          nzRight
          nzAlign="center">
          <nz-select
            nzAllowClear
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            nzPlaceHolder="All"
            (ngModelChange)="onModelChanged()"
            [(ngModel)]="assertionDirectionInput">
            <nz-option
              nzValue="SUPPORTS"
              nzLabel="Supports"></nz-option>
            <nz-option
              nzValue="DOES_NOT_SUPPORT"
              nzLabel="Does not Support"></nz-option>
            <nz-option
              nzValue="NA"
              nzLabel="N/A"></nz-option>
          </nz-select>
        </th>
        <th
          nzRight
          nzAlign="center">
          <nz-select
            nzAllowClear
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            nzPlaceHolder="All"
            (ngModelChange)="onModelChanged()"
            [(ngModel)]="SignificanceInput">
            <nz-option-group nzLabel="Predictive">
              <nz-option
                nzValue="SENSITIVITYRESPONSE"
                nzLabel="Sensitivity/Response"></nz-option>
              <nz-option
                nzValue="RESISTANCE"
                nzLabel="Resistance"></nz-option>
              <nz-option
                nzValue="ADVERSE_RESPONSE"
                nzLabel="Adverse Response"></nz-option>
              <nz-option
                nzValue="REDUCED SENSITIVITY"
                nzLabel="Reduced Sensitivity"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Prognostic">
              <nz-option
                nzValue="BETTER_OUTCOME"
                nzLabel="Better Outcome"></nz-option>
              <nz-option
                nzValue="POOR_OUTCOME"
                nzLabel="Poor Outcome"></nz-option>
              <nz-option
                nzValue="NA"
                nzLabel="N/A"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Diagnostic">
              <nz-option
                nzValue="POSITIVE"
                nzLabel="Positive"></nz-option>
              <nz-option
                nzValue="NEGATIVE"
                nzLabel="Negative"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Predisposing">
              <nz-option
                nzValue="PATHOGENIC"
                nzLabel="Pathogenic"></nz-option>
              <nz-option
                nzValue="LIKELY_PATHOGENIC"
                nzLabel="Likely Pathogenic"></nz-option>
              <nz-option
                nzValue="BENIGN"
                nzLabel="Benign"></nz-option>
              <nz-option
                nzValue="LIKELY_BENIGN"
                nzLabel="Likely Benign"></nz-option>
              <nz-option
                nzValue="UNCERTAIN_SIGNIFICANCE"
                nzLabel="Uncertain Significance"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="Oncogenic">
              <nz-option
                nzValue="ONCOGENIC"
                nzLabel="Oncogenic"></nz-option>
              <nz-option
                nzValue="LIKELY_ONCOGENIC"
                nzLabel="Likely Oncogenic"></nz-option>
              <nz-option
                nzValue="BENIGN"
                nzLabel="Benign"></nz-option>
              <nz-option
                nzValue="LIKELY_BENIGN"
                nzLabel="Likely Benign"></nz-option>
              <nz-option
                nzValue="UNCERTAIN_SIGNIFICANCE"
                nzLabel="Uncertain Significance"></nz-option>
            </nz-option-group>
          </nz-select>
        </th>
        <th
          nzRight
          nzAlign="center">
          <nz-select
            nzAllowClear
            nzSize="small"
            [nzDropdownMatchSelectWidth]="false"
            nzPlaceHolder="All"
            (ngModelChange)="onModelChanged()"
            [(ngModel)]="ampLevelInput">
            <nz-option
              nzValue="TIER_I_LEVEL_A"
              nzLabel="Tier I Level A"></nz-option>
            <nz-option
              nzValue="TIER_I_LEVEL_B"
              nzLabel="Tier I Level B"></nz-option>
            <nz-option
              nzValue="TIER_II_LEVEL_C"
              nzLabel="Tier II Level C"></nz-option>
            <nz-option
              nzValue="TIER_II_LEVEL_D"
              nzLabel="Tier II Level D"></nz-option>
            <nz-option
              nzValue="TIER_III"
              nzLabel="Tier III"></nz-option>
          </nz-select>
        </th>
        <th nzRight></th>
      </tr>
    </thead>
    <tbody>
      <ng-template
        nz-virtual-scroll
        let-aid
        let-index="index">
        <tr class="data-row">
          <td nzLeft>
            <cvc-assertion-tag
              [assertion]="aid"
              [enablePopover]="!isScrolling"
              popoverPlacement="right"></cvc-assertion-tag>
          </td>
          <td>
            <cvc-molecular-profile-tag
              [molecularProfile]="aid.molecularProfile"
              [enablePopover]="!isScrolling"
              [truncateLongName]="40"></cvc-molecular-profile-tag>
          </td>
          <td>
            <ng-container *ngIf="aid.disease.name; else diseaseElse">
              <cvc-disease-tag
                [disease]="aid.disease"
                [enablePopover]="!isScrolling"
                [truncateLongName]="true"></cvc-disease-tag>
            </ng-container>
            <ng-template #diseaseElse>
              <i>N/A</i>
            </ng-template>
          </td>
          <td>
            <div *ngIf="aid.therapies.length > 0; else therapiesElse">
              <cvc-tag-list>
                <ng-container *ngFor="let therapy of aid.therapies">
                  <cvc-therapy-tag
                    [therapy]="therapy"
                    [enablePopover]="!isScrolling"
                    [truncateLongName]="true"></cvc-therapy-tag>
                </ng-container>
              </cvc-tag-list>
            </div>
            <ng-template #therapiesElse>
              <i
                nz-typography
                nzType="secondary"
                >N/A</i
              >
            </ng-template>
          </td>
          <td>
            <ng-container *ngIf="aid.therapyInteractionType">
              <nz-tag
                nz-tooltip
                nzTooltipPlacement="top"
                [nzTooltipTitle]="
                  !isScrolling
                    ? (aid.therapyInteractionType
                      | therapyInteractionEnumDisplay)
                    : ''
                ">
                <i
                  nz-icon
                  style="color: #ac3996"
                  [nzType]="
                    aid.therapyInteractionType
                      | therapyInteractionEnumDisplay: 'icon-name'
                  "
                  class="attribute-icon"></i>
              </nz-tag>
            </ng-container>
            <ng-container *ngIf="!aid.therapyInteractionType">
              <i
                nz-typography
                nzType="secondary"
                >N/A</i
              >
            </ng-container>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="!isScrolling ? aid.summary : ''">
              <i
                nz-icon
                nzType="align-left"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (aid.assertionType | evidenceEnumDisplay) : ''
              ">
              <i
                nz-icon
                [nzType]="aid.assertionType | evidenceEnumDisplay: 'icon-name'"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling
                  ? (aid.assertionDirection | evidenceEnumDisplay)
                  : ''
              ">
              <i
                nz-icon
                [nzType]="
                  aid.assertionDirection | evidenceEnumDisplay: 'icon-name'
                "
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzAlign="center"
            nzRight>
            <nz-tag
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (aid.significance | evidenceEnumDisplay) : ''
              ">
              <i
                nz-icon
                [nzType]="aid.significance | evidenceEnumDisplay: 'icon-name'"
                class="attribute-icon"></i>
            </nz-tag>
          </td>
          <td
            nzRight
            nzAlign="center">
            <nz-tag
              *ngIf="aid.ampLevel"
              nz-tooltip
              nzTooltipPlacement="top"
              [nzTooltipTitle]="
                !isScrolling ? (aid.ampLevel | formatAmp: 'verbose') : ''
              ">
              {{ aid.ampLevel | formatAmp: 'compact' }}
            </nz-tag>
          </td>
          <td
            nzRight
            nzAlign="right">
            {{ aid.evidenceItemsCount }}
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</ng-template>

<ng-template #titleTemplate>
  <ng-container *ngIf="cvcTitleTemplate">
    <ng-template [ngTemplateOutlet]="cvcTitleTemplate"></ng-template>
  </ng-container>
  <ng-container *ngIf="cvcTitle">
    {{ cvcTitle }}
  </ng-container>
  <span class="table-info">
    <cvc-table-counts
      [cvcTableCountsConnection]="connection$"></cvc-table-counts>
  </span>
</ng-template>

<!-- card's extra template -->
<ng-template #extraTemplate>
  <nz-tag
    *ngIf="moreLoading$ | ngrxPush"
    nzColor="processing">
    <i
      nz-icon
      nzType="sync"
      nzSpin></i>
    <span>Loading…</span>
  </nz-tag>
  <cvc-no-more-rows [cvcShowTag]="noMoreRows$ | ngrxPush"></cvc-no-more-rows>
  <nz-filter-trigger
    [(nzVisible)]="statusFilterVisible"
    [nzDropdownMenu]="statusFilterMenu">
    <span
      nz-icon
      nzType="filter"
      nzTheme="fill"></span>
  </nz-filter-trigger>
</ng-template>

<nz-dropdown-menu #statusFilterMenu>
  <nz-card>
    <nz-row>
      <nz-radio-group
        [(ngModel)]="statusInput"
        (ngModelChange)="statusChanged()">
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.NonRejected"
          >Non-Rejected</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Accepted"
          >Accepted</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Submitted"
          >Submitted</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.Rejected"
          >Rejected</label
        >
        <label
          nz-radio-button
          [nzValue]="availableStatusFilters.All"
          >All</label
        >
      </nz-radio-group>
    </nz-row>
    @if (this.organizationId) {
      <nz-row>
        <nz-col nzSpan="2">
          <label
            nz-checkbox
            [(ngModel)]="includeSubgroups"
            (ngModelChange)="includeSubgroupsChanged()"></label>
        </nz-col>
        <nz-col nzSpan="22">
          <span>Include assertions submitted by child organizations</span>
        </nz-col>
      </nz-row>
    }
  </nz-card>
</nz-dropdown-menu>
